<template>
    <div>
        <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
            >
        </el-autocomplete>
    </div>
</template>
<script>
export default {
    props: {
        dataArr: {
            type: Array,
            default: ''
        }
    },
    data() {
      return {
        state: '',
        timeout: null
      }
    },
    methods: {
      querySearchAsync(queryString, cb) {
        var dataArr = this.dataArr
        console.log(this.dataArr)
        var results = queryString ? dataArr.filter(this.createStateFilter(queryString)) : dataArr

        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
           cb(results)
        }, 500 * Math.random())
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSelect(item) {
        console.log(this.state)
      }
    }
}
</script>
<style scoped>

</style>